<style lang="scss">
  @import "../../styles/base";

  page {
    padding-top: pxToRem(50);
    background-color: #f5f5f5;
  }
  .btn-video {
    @include middle-center-x();
    top: pxToRem(60);
    width: pxToRem(340);
    height: pxToRem(55);
  }
  .container {
    height: 100vh;
    .product-img {
      display: block;
      width: pxToRem(1125);
      height: pxToRem(1357);
    }
    .connect-tip {
      padding-top: pxToRem(35);
      font-size: pxToRem(50);
      color: #1f1f1f;
      text-align: center;
    }
    .status-wrap {
      margin-top: pxToRem(60);
      text-align: center;
      font-size: pxToRem(50);
    }
    .btn-next {
      display: block;
      margin: pxToRem(65) auto 0;
      width: pxToRem(1022);
      height: pxToRem(116);
      line-height: pxToRem(116);
      text-align: center;
      font-size: pxToRem(50);
      color: #1f1f1f;
      border: pxToRem(1.5) solid #d3d3d3;
      border-radius: pxToRem(58);
    }
  }

  .iphoneX {
    .connect-tip {
      padding-top: pxToRem(85);
    }
    .status-wrap {
      margin-top: pxToRem(320);
      .tip {
        margin-top: pxToRem(60);
      }
    }
  }
</style>
<template>
  <div class="container" :class="isIphoneX ? 'iphoneX':''">
    <img class="product-img" src="https://image.watsons.com.cn//upload/8dc96155.jpg">
    <div class="btn-video" @click="toVideo"></div>

    <!--<div class="connect-tip">接通电源，确认设备处于待链接状态</div>-->
    <div class="status-wrap">
      <radio-group @change="change">
        <radio value="1" color="#fece00"/>
        Wi-Fi灯已闪烁
      </radio-group>
    </div>
    <div class="btn-next" @click="toConfig">下一步</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        isIos: /iOS/.test(App.systemInfo.system),
        animationData: {},
        scale: 2,
      }
    },
    components: {},
    methods: {
      toVideo(){
        const url = /iOS/.test(App.systemInfo.system) ? 'https://mp.weixin.qq.com/s/c3s4l94gXSiJrSWIkpflDQ' : 'https://mp.weixin.qq.com/s/XH_nJ4n2CvhPTAvJp2NnDg';
        wx.navigateTo({
          url: '/pages/webview/main?link=' + encodeURIComponent(url)
        })
      },
      change(e) {
        this.value = e.mp.detail.value;
      },
      toConfig() {
        if (this.value != 1) {
          wx.showToast({
            title: '请确认黄灯已闪烁',
            icon: 'none'
          })
          return false;
        }
        wx.navigateTo({ url: '/pages/connect/main' })
      }
    },
    mounted() {
    },
  }
</script>
